<template>
  <header>
    <div class="headerLogo">
      <div class="logo">
        <img src="../../assets/imgs/logo.png" alt="logo">
      </div>
      <span>前端课程</span>
    </div>
    <div class="headerCentre">
      <ul>
        <li v-for="item in navList" :key="item.id" :class='{ active: item.id === navFlag }' @click="navBtn(item.id)">
          {{ item.text }}
        </li>
      </ul>
    </div>
    <div class="headerRight">
      <div class="searchBox">
        <input type="text" placeholder="请输入..." />
        <i class="iconfont icon-sousuo"></i>
      </div>
      <i class="iconfont icon-gouwuche cart"></i>
      <span class="login">登录/注册</span>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航连接
const navList = ref([
  {
    id: 1,
    text: '首页'
  },
  {
    id: 2,
    text: '课程'
  },
  {
    id: 3,
    text: '会员'
  },
])

const navFlag = ref(+localStorage.getItem('navFlage')!)

/**
 * 链接下划线
 * @param {number} navId - 链接id 
 */
const navBtn = (navId: number) => {
  localStorage.setItem('navFlage', `${navId}`)
  switch (navId) {
    case 1:
      router.push('/')
      break;
    case 2:
      router.push('/course')
      break;

  }
}

</script>

<style lang="scss" scoped>
header {
  width: 80%;
  height: 60px;
  margin: 0 auto;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .headerLogo {
    width: 160px;
    display: flex;
    align-items: center;

    .logo {
      height: 50px;
      width: 50px;
      margin-right: 14px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &>span {
      font-family: '楷体';
      font-weight: bold;
      font-size: 20px;
    }
  }

  .headerCentre {

    &>ul {
      display: flex;
      justify-content: space-around;

      &>li {
        width: 40px;
        margin-top: 10px;
        margin-right: 60px;
        cursor: pointer;
        height: 30px;
        border-bottom: 3px solid white;
        transition: .3s;
        text-align: center;
      }

      &>li:last-child {
        margin-right: 0;
      }
    }

    .active {
      border-bottom: 3px solid blue;
    }
  }

  .headerRight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;

    .searchBox {
      margin-right: 16px;
      width: 216px;
      background-color: rgb(240, 240, 240);
      border-radius: 10px;
      border: 1px solid rgb(240, 240, 240);
      margin-left: 10px;

      input {
        height: 30px;
        width: 180px;
        border-radius: 10px 0 0 10px;
        border: none;
        padding: 10px;
        background: transparent;
        margin-right: 10px;
      }
    }

    .cart {
      margin: 0 30px 0 20px;
      font-size: 24px;
    }

    .login {
      cursor: pointer;
    }
  }
}
</style>